<template>
  <div class="map">
    <!--    <div class="header">-->
    <!--      <div class="title">设备数据展示</div>-->
    <!--      <img src="../../../assets/static/image/btbj.png">-->
    <!--    </div>-->
    <div class="chart" id="mainPage" style="width: 100vw; height: 100vh;">
      <div class="geo" ref="geo"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons')
import { getDicts } from '@/api/system/dict/data.js'
import haianMap from "../../../assets/static/map/haian.json"
import chinaMap from "../../../assets/static/map/map.json"

import "echarts-gl";
import ElementResizeDetectorMaker from 'element-resize-detector'
import {terminalDataForBigScreen} from "../../../api/bigScreen";
import {mapState} from "vuex";
export default {
  name: 'Map',
  props: {
    isShowLine: {
      type: Boolean,
    },
  },
  data() {
    return {
      linesData: [
        // 北京市
        {
          coords: [
            [120.865262, 32.083242], // 南通
            [116.4074, 39.9042] // 北京
          ]
        },
        // 广东省 - 广州
        {
          coords: [
            [120.865262, 32.083242], // 南通
            [113.2644, 23.1291] // 广州
          ]
        },
        // 四川省 - 成都
        {
          coords: [
            [120.865262, 32.083242], // 南通
            [104.0667, 30.6704] // 成都
          ]
        },
        // 河南省 - 郑州
        {
          coords: [
            [120.865262, 32.083242], // 南通
            [113.6245, 34.7617] // 郑州
          ]
        },
        // 辽宁省 - 沈阳
        {
          coords: [
            [120.865262, 32.083242], // 南通
            [123.3817, 41.7948] // 沈阳
          ]
        },
        // 浙江省 - 杭州
        {
          coords: [
            [120.865262, 32.083242], // 南通
            [120.1551, 30.2747] // 杭州
          ]
        },
        // 江西省 - 南昌
        {
          coords: [
            [120.865262, 32.083242], // 南通
            [115.8943, 28.6827] // 南昌
          ]
        },
        // 湖北省 - 武汉
        {
          coords: [
            [120.865262, 32.083242], // 南通
            [114.3094, 30.5952] // 武汉
          ]
        },
        // 山东省 - 济南
        {
          coords: [
            [120.865262, 32.083242], // 南通
            [117.0004, 36.6513] // 济南
          ]
        },
        // 陕西省 - 西安
        {
          coords: [
            [120.865262, 32.083242], // 南通
            [108.9486, 34.2692] // 西安
          ]
        }
      ],
      caliberTypeList: [],
      myEcharts: null,
      chartHeight: 0,
      chartWidth: 0,
      option: {
        // backgroundColor: 'rgba(14,33,82,0.78)',
        title: {
          left: 'left',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        geo: {
          map: 'china',
          // center: ['60%','50%'],
          // top: '28%', // 地图上边距
          regions: [
            {
              name: '南海诸岛',
              itemStyle: {
                normal: {
                  opacity: 0
                },
                emphasis: {
                  opacity: 0
                }
              }
            }
          ],
          center: [104.1954, 35.8617],
          zoom: 1,
          show: true,
          label: {
            show: true,
            color: '#fff',
            // fontSize: 14,
            // fontWeight: 'bold',
            emphasis: {
              show: false,
              // color: '#fff',
              // fontSize: 14,
              // fontWeight: 'bold',
            }
          },
          layoutSize: "100%",
          roam: true,
          itemStyle:{
            normal:{
              shadowColor: 'rgba(0,0,0,0.8)',
              shadowBlur: 10,
              shadowOffsetY: 5,
              shadowOffsetX: 3,
              // areaColor:'#013C62',
              areaColor:'#1E90FF',
              borderColor:'#6C91E9',
              opacity:0.8,
              // borderWidth:2
            }
          }
        },
        series: [
          {
            name: '大用户表',
            data: [],
            coordinateSystem: 'geo',
            type: 'scatter',
            // symbolSize: function (data) {
            //   // return Math.sqrt(data[2]) / 5e2;
            // },
            // symbol: 'image://' + '',
            symbol: 'pin',
            symbolSize: 30,
            emphasis: {
              focus: 'series',
              label: {
                show: false,
                // formatter: function (param) {
                //   return param.data[3];
                // },
                position: 'top'
              }
            },
            tooltip: {
              show: true,
              trigger: 'item',
              padding: [0, 0, 0, 0],
              className: 'echarts-tooltip',
              backgroundColor: 'rgba(8,73,157,0.9)', // 自定义背景颜色
              fontSize: 14,
              position: 'top',
              textStyle: {
                color: '#fff',
              },
              borderColor: 'rgba(14,21,58,0.16)', // 自定义边框颜色
              formatter: function (params) {
                let [Longitude, latitude, yesterdayUsage, terminalId, caliber, terminalName, imei, pressure, latestPositiveNum, latestReverseNum, deptName, latestReadTime, valveControl, valveStatus] = params.value
                let result = ''
                if(name !== 'haps'){
                  result = `<div class="custom-tooltip-style" style="">${params.seriesName}</div>
                              <div style="padding: 10px 10px 0px 10px;">${params.marker}${params.name}</div>
                              <div class="custom-tooltip-content">
                                <div class="custom-tooltip-content_item">大用户表用户名称：<span>${deptName}</span></div>
                                <div class="custom-tooltip-content_item">设备编号：<span>${terminalId}</span></div>
                                <div class="custom-tooltip-content_item">管径：<span>${caliber}</span></div>
                                <div class="custom-tooltip-content_item">设备名称：<span>${terminalName}</span></div>
                                <div class="custom-tooltip-content_item">imei：<span>${imei}</span></div>
                                <div class="custom-tooltip-content_item">正向实时流量：<span>${latestPositiveNum} m³</span></div>
                                <div class="custom-tooltip-content_item">反向实时流量：<span>${latestReverseNum} m³</span></div>
                                <div class="custom-tooltip-content_item">累计实时流量：<span>${latestPositiveNum - latestReverseNum} m³</span></div>
                                <div class="custom-tooltip-content_item">经度：<span>${Longitude}</span></div>
                                <div class="custom-tooltip-content_item">纬度：<span>${latitude}</span></div>
                                <div class="custom-tooltip-content_item">是否带阀控：<span>${valveControl}</span></div>
                                <div class="custom-tooltip-content_item">阀门状态：<span>${valveStatus}</span></div>
                                <div class="custom-tooltip-content_item">更新时间：<span>${latestReadTime}</span></div>
                              </div>`
                }else{
                  result = `<div class="custom-tooltip-style">${params.seriesName}</div>
                    <div style="padding: 10px 10px 0px 10px;">${params.marker}${params.name}</div>
                    <div class="custom-tooltip-content">
                      <div class="custom-tooltip-content_item">大用户表用户名称：<span>${deptName}</span></div>
                      <div class="custom-tooltip-content_item">设备编号：<span>${terminalId}</span></div>
                      <div class="custom-tooltip-content_item">管径：<span>${caliber}</span></div>
                      <div class="custom-tooltip-content_item">设备名称：<span>${terminalName}</span></div>
                      <div class="custom-tooltip-content_item">imei：<span>${imei}</span></div>
                      <div class="custom-tooltip-content_item">正向实时流量：<span>${latestPositiveNum} m³</span></div>
                      <div class="custom-tooltip-content_item">反向实时流量：<span>${latestReverseNum} m³</span></div>
                      <div class="custom-tooltip-content_item">累计实时流量：<span>${latestPositiveNum - latestReverseNum} m³</span></div>
                      <div class="custom-tooltip-content_item">经度：<span>${Longitude}</span></div>
                      <div class="custom-tooltip-content_item">纬度：<span>${latitude}</span></div>
                      <div class="custom-tooltip-content_item">是否带阀控：<span>${valveControl}</span></div>
                      <div class="custom-tooltip-content_item">阀门状态：<span>${valveStatus}</span></div>
                      <div class="custom-tooltip-content_item">更新时间：<span>${latestReadTime}</span></div>
                    </div>`
                }
                return result
              }
            },
            itemStyle: {
              shadowBlur: 15,
              shadowColor: 'rgba(41,108,33,0.8)',
              shadowOffsetY: 5,
              opacity: 10,
              color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                {
                  offset: 0,
                  color: 'rgb(123,236,124)'
                },
                {
                  offset: 1,
                  color: 'rgb(24,122,33)'
                }
              ])
            },
          },
          {
            name: '户表',
            type: 'effectScatter',
            // type: 'scatter',
            coordinateSystem: 'geo',
            // symbol: 'pin',
            symbolSize: 20,
            // symbol: 'image://' + require('../../../assets/static/svg/loudong.svg'),
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke'
            },
            itemStyle: {
              shadowBlur: 10,
              shadowColor: 'rgba(243,101,33,0.5)',
              shadowOffsetY: 5,
              opacity:10,
              color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                {
                  offset: 0,
                  color: 'rgb(251,165,118)'
                },
                {
                  offset: 1,
                  color: 'rgb(210,66,47)'
                }
              ])
            },
            hoverAnimation: true,
            label:{
              normal: {
                formatter: (params) => {
                  let data = params.name
                  return data
                }
              },
              emphasis: {
                show: false
              }
            },
            opacity: 10,
            tooltip: {
              show: true,
              trigger: 'item',
              padding:[0,0,0,0],
              className: 'echarts-tooltip',
              backgroundColor: 'rgba(8,73,157,0.9)', // 自定义背景颜色
              fontSize: 14,
              position: 'top',
              textStyle: {
                color:'#fff',
              },
              borderColor: 'rgba(14,21,58,0.16)', // 自定义边框颜色
              formatter(params) {
                let [lng, lat, latestReadNum, concentratorCount, collectorCount, sheetsName, userCount, count, copyRate] = params.value
                let result = `<div class="custom-tooltip-style">${params.seriesName}</div>
                <div style="padding: 10px 10px 0px 10px;">${params.marker}${params.name}</div>
                <div class="custom-tooltip-content">
                  <div class="custom-tooltip-content_item">区域名称：<span>${sheetsName}</span></div>
                  <div class="custom-tooltip-content_item">实时读数：<span>${latestReadNum} m³</span></div>
                  <div class="custom-tooltip-content_item">集中器数量：<span>${concentratorCount}</span></div>
                  <div class="custom-tooltip-content_item">采集器数量：<span>${collectorCount}</span></div>
                  <div class="custom-tooltip-content_item">表用户数量：<span>${userCount}</span></div>
                  <div class="custom-tooltip-content_item">表数量：<span>${count}</span></div>
                  <div class="custom-tooltip-content_item">昨日抄回率：<span>${copyRate == null ? 0 : (copyRate * 100).toFixed(2)} %</span></div>
                  <div class="custom-tooltip-content_item">经度：<span>${lng}</span></div>
                  <div class="custom-tooltip-content_item">纬度：<span>${lat}</span></div>
                </div>`
                return result
              }
            },
            data: [],
          },
          {
            type: 'lines',
            zlevel: 2,
            coordinateSystem: 'geo',
            symbol: ['none', 'none'],
            tooltip: {
              show:false
            },
            lineStyle: {
              normal: {
                color: 'rgba(255,215,0,0.7)',
                shadowBlur: 5, // 模糊半径
                shadowColor: 'rgba(255,255,255,0.5)', // 发光颜色
                width: 2.2,
                opacity: 0.8,
                curveness: 0.3, //线条曲直度
              }
            },
            effect: {
              show: true,
              period: 6,
              trailLength: 0,
              symbol: 'image://' + require('../../../assets/static/svg/aircraft.svg'),
              symbolSize: 25,
            },
            data: []
          },
        ]
      }
    }
  },
  computed: {
    name() {
      return this.$store.state.user.name
    },
  },
  watch: {
    isShowLine(val) {
      if(val){
        this.option.series[2].data = this.linesData
      }else{
        this.option.series[2].data = []
      }
      this.myEcharts.setOption(this.option);
    }
  },
  mounted() {
    this.getOffsetSize()
    this.getList()
    this.getCaliberType()
    setTimeout(() => {
      this.init()
    },100)
  },
  beforeDestroy() {
    this.myEcharts.dispose()
  },

  methods: {
    // 获取字典所有口径信息
    getCaliberType(){
      getDicts('ldbd_pipe_caliber').then(res => {
        if(res.code === 200) {
          this.caliberTypeList = res.data
        }
      })
    },
    // ldbd_pipe_caliber
    // 初始化地图
    async init() {
      if(this.name === 'haps'){
        echarts.registerMap("haian", {geoJSON: haianMap})
        this.option.geo.map = 'haian'
        // this.option.geo.top = '10%'
        this.option.geo.center = [120.465995,32.540288]
        this.option.geo.zoom = 0.8
      }else{
        echarts.registerMap("china", {geoJSON: chinaMap})
        this.option.geo.map = 'china'
        // this.option.geo.top = '0%'
        this.option.geo.center = [104.1954, 35.8617]
        this.option.geo.zoom = 1.55
      }
      this.myEcharts = echarts.init(this.$refs.geo)
      // 创建页面元素大小变化绑定事件
      const erd = ElementResizeDetectorMaker()
      //监听id为mainPage的元素 大小变化
      erd.listenTo(document.getElementById('mainPage'), () => {
        // 获取DOM的大小
        this.getOffsetSize()
        // 响应容器的大小变化
        this.myEcharts.resize({
          width: this.chartWidth,
          height: this.chartHeight
        })
      })
      // this.option.series[2].data = this.linesData
      // if(this.name === 'haps'){
      //   this.geo.map = 'haiAn'
      //   this.option.geo.zoom = 5
      //   this.option.geo.top = '90%'
      //   this.option.geo.left = '50%'
      //   this.option.series[2].data = []
      // }else{
      //   this.geo.map = 'china'
      //   this.option.geo.zoom = 1.45
      // }

      this.myEcharts.setOption(this.option)
    },
    //获取变化后的页面大小
    getOffsetSize() {
      const mainPage = document.getElementById('mainPage')
      this.chartHeight = mainPage.offsetHeight
      this.chartWidth = mainPage.offsetWidth
    },
    // 获取大小表数据
    getList() {
      terminalDataForBigScreen().then(response => {
        if (response.code === 200) {
          this.dbList = response.data.db
          this.xbList = response.data.xb
          this.handleDataDb()
          this.handleDataXb()
        }
      })
    },
    // 处理大表数据
    handleDataDb() {
      let list = []
      if(this.dbList.length > 0) {
        this.dbList.forEach(item => {
          if (item.lng !== "" && item.lat !== "" && item.lat !== null && item.lng !== null) {
            this.caliberTypeList.filter(dictItem => {
              if(dictItem.dictValue === item.caliber){
                item.caliber = dictItem.dictLabel
              }
            })
            let obj = {
              name: item.deptName,
              value: [item.lng, item.lat, item?.yesterdayUsage, item.terminalId, item?.caliber, item?.terminalName, item?.imei, item?.pressure, item?.latestPositiveNum, item?.latestReverseNum, item?.deptName, item?.latestReadTime, item?.valveControl, item?.valveStatus],
            }
            list.push(obj)
          }
        })
      }
      this.option.series[0].data = list
      this.myEcharts.setOption(this.option, true);
    },
    // 处理小表数据
    handleDataXb() {
      let list = []
      if(this.xbList.length > 0) {
        this.xbList.forEach((item, index) => {
          let obj = {
            name: item.sheetsName,
            value: [item.lng, item.lat, item.latestReadNum, item.concentratorCount, item.collectorCount, item.sheetsName, item.userCount, item.count, item.copyRate],
          }
          list.push(obj)
        })
      }
      this.option.series[1].data = list
      this.myEcharts.setOption(this.option, true);
    },
  }
}
</script>
<style lang="scss" scoped>
//.map{
//  .header{
//    position: relative;
//    width: 6rem;
//    .title{
//      padding: .1rem;
//      font-size: .2rem;
//      font-weight: 530;
//    }
//    img{
//      width: 100%;
//      position: absolute;
//      bottom: 0;
//      left: 0;
//    }
//  }
//}

::v-deep .echarts-tooltip {
  padding: 0 0!important;
  border: none !important;
  background-color: transparent !important;
  z-index: 1000;
  //.custom-tooltip-style{
  //  background: red;
  //}

}
::v-deep .custom-tooltip-style{
  margin-top: 2px;
  padding: 5px 5px;
  background: #0085cc;
  text-align: center
}
::v-deep .custom-tooltip-content{
  padding: 10px 0px;
}
::v-deep .custom-tooltip-content_item{
  padding: 2px 20px;
}
::v-deep .custom-tooltip-content_item span{
  color: #b3d5ff;
}
</style>
